<style>
    .h-icon {
        color: #00b2d7;
        cursor: pointer;
        font-size: 25px;
        margin: 13px 5px;
        transition: font-size .3s ease;
        -webkit-transition: font-size .3s ease;
    }

    .icon-times:hover {
        color: #028eaa!important;
    }

    #searchIcon {
        z-index: 10;
        position: absolute;
        right: 134px;
    }

    #searchIcon.icon-times {
        margin-right: 5px;
        font-size: 22px;
    }

    #searchWrapper {
        position: relative;
        margin: 7px 5px;
        width: 350px;
        transform: scaleX(0);
        -webkit-transform: scaleX(0);
        transform-origin: right;
        -webkit-transform-origin: right;
        transition: transform .3s ease;
        -webkit-transition: -webkit-transform .3s ease;
    }

    #searchWrapper.w-show {
        transform: scaleX(1);
        -webkit-transform: scaleX(1);
    }

    #searchWrapper .j-input {
        width: 100%;
    }

    #searchWrapper .icon-times {
        cursor: pointer
    }

    #number {
        color: #c00;
        width: 100%;
        position: absolute;
        text-align: center;
        z-index: 10;
        left: 3px;
        top: 33px;
        border: 1px solid #ccc;
        background-color: #eee;
    }

    #queryResult {
        position: absolute;
        width: 100%;
        overflow: hidden;
        margin: 3px;
        background-color: rgba(255, 255, 255, .95);
        top: 47px;
        border: 1px solid #ccc;
        padding: 5px;
        max-height: 335px;
        overflow-y: auto;
        min-height: 30px;
    }

    .q-item {
        border-top: 1px solid #ccc;
        padding: 5px 0;
        cursor: pointer;
    }

    .q-item.b-none {
        border-bottom: none
    }

    .q-item:hover {
        background-color: #eee;
    }

    .q-name {
        font-weight: bold;
        font-size: 18px;
    }

    .q-intro,
    .q-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
    }
    @media screen and (max-width: 600px) {
        #searchWrapper {
            width: 214px;
        }
        .h-icon {
            margin: 13px 2px;
        }
        #searchIcon {
            right: 88px;
        }
        #header {
            padding: 0px;
        }
        .h-icon.icon-home{
            display: none;
        }
        .h-icon.icon-github{
            position: relative;
            left: 4px;
        }
    }
</style>
<i class="j-icon icon-arrow-up h-icon f-right" jon='toTop'></i>
<i class="j-icon icon-home h-icon f-right" jon='toHome'></i>
<i class="j-icon icon-github h-icon f-right" jon='toGithub'></i>
<i class="j-icon icon-edit-sign h-icon f-right" jon='toMesBoard'></i>
<i id='searchIcon' class="j-icon h-icon f-right" jif='showSearch:class[icon-times|icon-search]' jon='toggleSearch'></i>
<div id="searchWrapper" jif='showSearch:class[w-show]' jstyle='width:{{$.swWidth}}' class='f-right'>
    <input type="text" class='j-input' jon='focus:searchFocus' j='queryString' placeholder="搜索api">
    <div j='number' jshow='{{$.showResult}}' id='number'>$+'条记录'</div>
    <div j='queryList' jshow='{{$.queryList}}.length>0&&{{$.showResult}}' id='queryResult'>
        <div j='$each' class='q-item' jon='toQueryResult'>
            <div j='name' jattr='title:{{$.name}}' class='q-name' jhtml>this.shapeQueryName($)</div>
            <div j='intro' jattr='title:{{$.intro}}' class='q-intro' jhtml>this.shapeQueryName($)</div>
        </div>
    </div>
</div>

<script>
    new Jet({
        name: 'header',
        data: {
            queryList: [],
            showResult: false,
            showSearch: false,
            queryString: '',
            number: 0,
            swWidth: function () {
                if ($J.width() < 600) {
                    return $J.width() - 127
                }
                return 350
            }
        },
        ondatachange: {
            queryString: function (d) {
                var arr = this.$get('Query').search(d.value);
                this.queryList.$replace(arr);
                this.number = arr.length;
            }
        },
        func: {
            toggleSearch: function () {
                this.showSearch = !this.showSearch;
                if (this.showResult) {
                    this.showResult = false;
                }
            },
            searchFocus: function () {
                this.showResult = true;
            }, toQueryResult: function (opt) {
                this.showResult = false;
                this.$props.jumpTo(opt.data.url, opt.data.des)
            }, shapeQueryName: function (s) {
                var si = s.toLowerCase().indexOf(this.queryString.toLowerCase());
                if (si === -1)
                    return s;
                var ei = si + this.queryString.length;
                return s.substring(0, si) + '<span class="__red">' + s.substring(si, ei) + '</span>' + s.substring(ei);
            }, toGithub: function () {
                $J.open("https://github.com/theajack/cnchar")
            }, toHome:function(){
                $J.open("https://www.theajack.com")
            }, toTop: function () {
                $J.id('rootApp').scrollTo(0)
            },toMesBoard:function(){
                $J.open("https://github.com/theajack/cnchar/issues/new")
            }
        }
    })
</script>